import MC from 'mcanvas'
// import { MImage } from 'mcanvas'

import qrbg from '@/assets/img/icon/assistant/qr-bg.png'
import QR_CODE from 'qrious'
import { ref } from 'vue'
export function myCanvas() {
  const posterImg = ref('')
  const share_url = 'https://www.baidu.com/?tn=02003390_19_hao_pg'
  const qr = new QR_CODE({
    value: share_url
  })
  const qr_img = new Image()
  qr_img.src = qr.toDataURL('image/jpeg')
  const mc = new MC({
    width: 648,
    height: 967,
    backgroundColor: '#fff'
  })
  //   mc.background(qrbg, {
  //     color: '#fff',
  //     type: 'crop'
  //   })
  mc.add(qrbg, {
    width: '100%',
    pos: {
      scale: 1.1
    },
    crop: {
      radius: 16
    }
  })
    .add(qr_img, {
      width: 200,
      pos: {
        x: 224,
        y: 326,
        scale: 1
      }
    })
    .draw((b64) => {
      posterImg.value = b64
      //   const mi = new MImage(b64)
      //   mi.crop({
      //     radius: 16,
      //   }).draw((b64src) => {
      //     posterImg.value = b64src
      //   })
    })

  return posterImg
}
